<template>
  <div>
    <BasicForm @register="registerForm" >
      <template #[item]="{ model, field }" v-for="item in data.slots">
        <!-- <a-input v-model:value="model[field]"></a-input> -->
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts" setup name="render-page">
import { ref, watch, onMounted, nextTick, defineAsyncComponent } from 'vue';
import { Button } from 'ant-design-vue'
import { useMessage } from '/@/hooks/web/useMessage';
import type { DynamicProps } from '/#/utils';
import { useComponentRegister } from '/@/components/Form/index';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { BasicForm, useForm, FormSchema, FormActionType, FormProps } from '/@/components/Form/index';
import { doMapperField } from './fieldMapper'

const { createMessage } = useMessage();
type Props = Partial<DynamicProps<FormProps>>;
const emit = defineEmits(['register', 'success']);
const attrs = useAttrs({ excludeDefaultKeys: false });

useComponentRegister('MyAlert', defineAsyncComponent(() => import(`/@/components/My/MyAlert.vue`)));

const props = defineProps({
  config: { type: Object }
})
const data = ref<any>({
  slots: []
})

const [registerForm, { resetFields, resetSchema, setProps }] : [any, FormActionType] = useForm();

watch(
  () => props.config,
  (val : Object) => {
    if (!val) {
      return
    }
    const { globalConfig, widgetList } = doMapperField(props.config || {})
    nextTick(async () => {
      const formProps = { 
        labelCol: {
          md: { span: 4 },
          sm: { span: 6 },
        },
        wrapperCol: { lg: 24, md: 24 },
        showActionButtonGroup: false,
        ...globalConfig
      }
      await setProps(formProps)

      const formSchema = widgetList.map(e => {
        const { formItemFlag, useAsFormItem } = e.formItem || {}
        let slot = null
        if (!useAsFormItem && formItemFlag) {
          slot = e.formItem.field
          data.value.slots.push(slot)
        }
        return {
          ...e.formItem, 
          slot,
          useFormItemWrapper: e.formItem?.useAsFormItem,
          componentProps: { ...e.props }
        }
      })
      await resetSchema(formSchema)
      await resetFields()
      console.log('formSchema', formSchema)
    })
    
  }
)

</script>
